关于React的一些小知识

这里搜集了几个关于react的零散知识，有些虽然知道了也不一定能帮你写出更好的代码，但能够扩展一下知识。

以下全部来自于https://overreacted.io，需要更详细解释的可以去里面找相关文章。

1. 关于`lint`

eslint有一条规则是不允许在componentDidMount中setState，但实际上确实有一种情况需要这么做：计算出渲染好的DOM尺寸然后执行后续操作。如果某种行为是需要被限制的，那么通常来说react一定会警告你或者拒绝执行：例如组件卸载后执行setState。

所以lint并非是完美的开发规范，当然它能够规范团队的代码并且显著的帮你降低bug的出现，但是你需要知道你的代码被标红是为什么，该条规则是否是绝对正确的并且能降低bug？如果不是，你完全可以把它去掉。

2. `$$typeof: Symbol(react.element)`

如果你把一个组件实例打印出来，你会发现除了我们熟悉的props children ref等属性，还有一个

$$typeof: Symbol(react.element)

那么这个$$typeof是干嘛的呢？实际上是用于安全方面的。

假设你的站点不安全，然后使得用户可以存储json格式的数据，那么当你输出数据时这段json可能会被处理为对象，如果这个对象符合React Element的定义就会形成xss攻击。

所以在react 0.14之后，react在每个React Element上都附上了这个$$typeof: Symbol(react.element)属性，由于Symbol不能在json中进行传输所以没有办法用这种方式伪造React Element。

浏览器不支持Symbol怎么办？那就没办法获得这种保护了，这种情况下react为了一致性考虑会将$$typeof设置为一个数字：0xeac7 （0xeac7看起来像react）。

3. `react`怎么知道你的组件是函数组件还是类组件？

如果一个组件是函数组件，那么可以直接用Page({ title: 'hello' })来创建，但是如果是类组件那么就需要用new操作符来实例化，那么react是怎么区分这两种组件的呢？

首先，直接判断是函数还是类是很困难的，即使你能够tell a class from a function in JavaScript，被babel转译后就行不通了，因为类也会被转译为函数。

下面直接出结论：由于当你写组件时一定是extends React.Component的形式，所以只要在Component上定义一个特殊字段表示这是类组件就可以了。不能是类的静态属性，因为有些转码器不能正确复制静态属性，所以需要设置为实例属性，也就是Component.prototype.isReactComponent = {};。

isReactComponent被设置为{}而不是true是由于早期的Jest会在某些情况下删除基本类型的属性。
用Page.prototype instanceof React.Component来判断行不行？不太行，因为有可能你的项目中有两个react包，不管是不是故意的。

4. `super(props)`到底要不要传入`props`

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

简单来说，即使你不传props，react也会在组件实例化后自动把props挂载上去，这也是为什么你不传props但是你依然能在组件内其他地方使用this.props的原因：

 // Inside React
 const instance = new YourComponent(props);
 instance.props = props;

但是这种情况你不能在constructor内使用this.props，因为props只有在实例化之后才会被挂载到实例上面。那如果你希望在constructor内使用，你就需要将props传入super():

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }
  // ...
}

// 当执行super的时候
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

但是为什么能够在下面这种形式下使用this.props:

class Checkbox extends React.Component {
  state = { isOn: this.props.isOn };
  // ...
}

因为@babel/plugin-proposal-class-properties帮你提供了正确传递参数的默认constructor，否则你也不能使用这种写法。

参考：
Writing Resilient Components
Why Do React Elements Have a $$typeof Property?
How Does React Tell a Class from a Function?
Why Do We Write super(props)?

关于React的一些小知识